Simple 3 Column Table

Simple 3 Column Table

I used the center code to center the table and center the content
and i used the border code.
You can remove those codes if do not want them
border and center

Column 1 Place your content in column 1

Column 2 Place your content in column 2

Column 3 Place your content in column 3

<center><table width="100%" border="1"><tr><br> <td width="33%"><center>Column 1<br>Place your <br>content in <br>column 1</center></td><td width="33%"><center>Column 2<br>Place your <br>content in <br>column 2</center></td><td width="33%"><center>Column 3<br>Place your <br>content in <br>column 3</center></td><br> </tr></table></center>

Line Break and Spaces

If you need to go to the next line down use
<br>
If you need to move something left or right,
and the space bar doesn't do it.
You can use html to add the spaces.
The code is &nbsp;
You may need to add a lot of them,
depending on how many spaces you need.

<br> &nbsp;

Anchor Links

<a name="Menu"></a>



Menu

<a href="http://htmlcopyandpaste.blogspot.com/2009/07/anchor-links.html#Instructions">Instructions</a> Instructions

Anchor Links Anchor Links are used to jump to a section of a page when a link is clicked
First Code	Second Code
The first code is the link that is clicked on to take you to another area. <a href="http://www.PageURL.html#AnyName">Link Name</a> First Anchor Code is the link <a href="http://www.PageURL.html#AnyName">Link Name</a>	And the second code you place before the section you want the link to jump to <a name="AnyName"></a> Second Anchor Code goes in front of the section linking to <a name="AnyName"></a>
<a name="Instructions"></a> Instructions Anchor Links are used to jump to a section of a page when a link is clicked Anchor Links take (2 Codes) The first code is the link that is clicked on <a href="http://www.PageURL.html#AnyName">Link Name</a> And the second code you place before the section you want the link to jump to <a name="AnyName"></a> **Change AnyName in both codes to whatever you want, except don't use a space in the name, and both need to be the same name** Example: Say you want the link to take the person clicking on it to a Return Policy section, then you could change Anyname to 'ReturnPolicy' in both codes. Then you would want to change the 'Link Name' to say, Return Policy or something similar. And you change the PageURL to the url of the page jumping to if not on the same page. If its on the same page, you do not need to put the url, use href="#ReturnPolicy" You can also use anchor links to go back to the top of the page or menu "Back To Menu' to jump back to the top of the page to the Menu. <a href="http://htmlcopyandpaste.blogspot.com/2009/07/anchor-links.html#Menu">Menu</a> Back to Menu

Marquee - Scrolling

Marquee - Scrolling Text & Images

Welcome To My Blog!!

<marquee behavior="scroll" direction="left">Welcome To My Blog!!</marquee>

Marquee - Control Speed of Scrolling Text

Slow Scrolling Text

Slow scrolling text

<marquee behavior="scroll" direction="left" scrollamount="2">Slow scrolling text</marquee>

Medium Scrolling Text

Medium scrolling text

<marquee behavior="scroll" direction="left" scrollamount="5">Medium scrolling text</marquee>

Fast Scrolling Text

Fast scrolling text

<marquee behavior="scroll" direction="left" scrollamount="10">Fast scrolling text</marquee>

Marquee - Scrolling Images
Some browsers to not display Marquee's correctly.
Their are other ways to display images, including a scrollbox, or javascript.

<marquee onMouseOver="this.scrollAmount=0" onMouseOut="this.scrollAmount=4" scrollamount="4" direction="left" loop="true" width="600" height="410"><img src="http://i18.photobucket.com/albums/b128/carolsgalaxy/Carols%20Photos/us17.jpg" height="400"> <img src="http://i18.photobucket.com/albums/b128/carolsgalaxy/Carols%20Photos/TomMeUniversal2.jpg" height="400"> <img src="http://i18.photobucket.com/albums/b128/carolsgalaxy/Carols%20Photos/LionCountrySafari082.jpg" height="400"> <img src="http://i18.photobucket.com/albums/b128/carolsgalaxy/Carols%20Photos/2011-01-04_071742.jpg" height="400"></marquee>

CSS Examples

Their are a lot of free CSS Templates, and code examples online.
Below are a few links:
Free CSS Templates, Menus, Layouts, CSS Galleries
Free CSS Templates

---

Their are also CSS Generators online.
Below are a few links:
css-generator.com
cssmenumaker.com
creatingonline.com

---

Here is a link to a really good website for CSS Examples
http://www.w3schools.com/css/css_examples.asp

---

Styling Link Colors

<style type="text/css">a:link {color: #0000ff;}a:visited {color: #00ff00;}a:hover {color: #ff0000;text-decoration: none;}a:active {color: #777777;}</style>

---

Styling Tables

table{width:100%;border-collapse:collapse;table-layout:auto;vertical-align:top;margin-bottom:15px;border:1px solid #CCCCCC;}table thead th{color:#FFFFFF;background-color:#666666;border:1px solid #CCCCCC;border-collapse:collapse;text-align:center;table-layout:auto;vertical-align:middle;}table tbody td{vertical-align:top;border-collapse:collapse;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;}table thead th, table tbody td{padding:5px;border-collapse:collapse;}table tbody tr.light{color:#666666;background-color:#F7F7F7;}table tbody tr.dark{color:#666666;background-color:#E8E8E8;}

---

Styling Tabbed Links

body {font: bold 11px;}h1 {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16px;font-weight:bold;margin:0;padding:0;}hr {border:none;border-top:1px solid #CCCCCC;height:1px;margin-bottom:25px;}#tabs {float:left;width:100%;font-size:93%;border-bottom:1px solid #2763A5;line-height:normal;}#tabs ul {margin:0;padding:10px 10px 0 50px;list-style:none;}#tabs li {display:inline;margin:0;padding:0;}#tabs a {float:left;background:url("tableft.gif") no-repeat left top;margin:0;padding:0 0 0 4px;text-decoration:none;}#tabs a span {float:left;display:block;background:url("tabright.gif") no-repeat right top;padding:5px 15px 4px 6px;color:#FFF;}#tabs a span {float:none;}#tabs a:hover span {color:#FFF;}#tabs a:hover {background-position:0% -42px;}#tabs a:hover span {background-position:100% -42px;}

---

Styling Link Buttons using Borders

a:link {border-style: solid;border-width : 1px 4px 4px 1px;text-decoration : none;padding : 4px;border-color : #69f #00f #00f #69f;}a:hover{border-color: #ccc; }

Easy Link Button using borders

---

Styling Icon Colors

a { padding: 0 2px 1px 15px; color: #c00; }a:link { background: #fff url(ball.gif) left center no-repeat; }a:hover { background: #fff url(ball2.gif) left center no-repeat; }a:active { background: #fff url(ball3.gif) left center no-repeat; }

Link with a Bullet Icon that changes color

---

Tables vs Divs

I myself prefer Tables, but most developers prefer Divs.

To me it is easier to get things to go where I want them using Tables

Div's need to be properly coded or they end up who knows where on the page.

The learning time for Tables to me is so much easier.

But using Divs does have its advantages.

Their are different ways to position divs. (Absolute, Relative, and Float)

Below is the css code for a div named navigation that is Absolute Positioned

<style type="text/css">#navigation {position: absolute; left: 50px; top: 100px;}</style>

And here is the div code that goes in the Body of your page

<div id="navigation"><a href="page1.html"> Link 1 </a> <br /><a href="page2.html"> Link 2 </a> <br /><a href="page3.html"> Link 3 </a></div>

As you can see, you position the div to a specific area of the page.

This can be a good thing, or a bad thing.

Now say you want the next div to go below that div.

In a Table, we would start a New Row < tr >(Simple). In a Div layout. if your a beginner, good luck figuring it out.

Tables are simple < tr > to start a new row,
and < td > to start a new column.

Div's require a lot more learning to understand the many different ways to use them.

I am still trying to learn Div's myself. I have used Div Layouts many times, but always pre-made layouts, and I have difficulty trying to alter the placement of the Divs. If changing number of divs in each row, I have the best luck Absolute Positioning every div, but need a calculator for that. I'm terrible at math. Floating Divs are easy if just 2 columns. Relative Div's totally confuse me.

To me,
Tables are like having Dresser Drawers to put stuff in,
TR for each row of drawers, TD for each drawer in the row,

Div's are like trying to stack stuff without drawers or shelves,
if not stacked correctly, your stuff or div, will fall over.
The easiest to me is a two column, float left, float right, div layout.
If you want 4 (divs) in one row, and 2 (divs) in another row, and 3 (divs) in the next row, it gets difficult. But maybe I just haven't found the right tutorial.

But that doesn't mean you shouldn't try to learn it,
because their are good reasons to use Div's instead of Tables.

If you want to be a pro at building websites, then you would want
to learn how to use Div Layouts.

There are many Div Layout Tutorials online.

Below are a few links explaining Div Layouts:

Working with divs

Div boxes

HTML DIV Tutorial

Using a Style Sheet on Multiple Pages

There are several ways to include a Style Sheet on your page.

1. Insert Style Sheet in the head section of every page

2. Call a Style Sheet with PHP, but will get to that later.

3. Make a file in your directory with your Style Sheet Code,

Name the file with the .css ending.
You can name it anything you want, but needs to end in .css
style.css my.css style1.css

Then place the command below
(replace with your url/file name)
in the Head Section of your pages to call for the Style Sheet:

<LINK REL=stylesheet HREF="http://www.your.page/my.css" TYPE="text/css">